import { EditOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { randomString } from '../../utils';
import './index.less';

type inputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'radio' | 'checkbox' | 'file';

interface IEditInfoConfigItem {
    label: string;
    value?: string;
}

interface IEditInfoConfig {
    content: Array<IEditInfoConfigItem>;
}

interface IEditInfoItemProps {
    // input的提示语
    title: string;

    value?: string;
    // input的name
    name: string;
    // input类型
    type: inputType;
    // 详细的配置对象
    config?: IEditInfoConfig;
}

export default function EditInfoItem(props: IEditInfoItemProps) {
    // 编辑状态记录
    const [isEdit, setIsEdit] = useState(false);
    // input数据
    const [inputValue, setInputValue] = useState(props.value);

    function save() {
        if (!inputValue) return;
        // 然后关闭编辑状态
        setIsEdit(false);
    }

    function cancel() {
        setIsEdit(false);
    }

    return (
        <>
            <div className="edit-info-item">
                <div className="edit-name">
                    <div className="left-tip">
                        <label htmlFor="name">{props.title}</label>
                    </div>
                    <div className="right-edit">
                        {!isEdit ? (
                            <div className="show">
                                <h2>{props.value}</h2>
                                <EditOutlined onClick={() => setIsEdit(true)} />
                            </div>
                        ) : (
                            <>
                                {props?.config?.content ? (
                                    // 有config.content属性时，渲染多个input
                                    props.config.content.map((item: IEditInfoConfigItem) => {
                                        const id = randomString(10);
                                        return (
                                            <span key={id}>
                                                <input
                                                    type={props.type}
                                                    id={id}
                                                    name={props.name}
                                                    value={item.value}
                                                    onChange={(e) => setInputValue(e.target.value)}
                                                />
                                                {item.label ? <label htmlFor={id}>{item.label}</label> : ''}
                                            </span>
                                        );
                                    })
                                ) : (
                                    <input
                                        type={props.type}
                                        value={inputValue}
                                        onChange={(e) => setInputValue(e.target.value)}
                                    />
                                )}{' '}
                                <div className="btn">
                                    <button onClick={() => save()}>保存</button>
                                    <button onClick={() => cancel()}>取消</button>
                                </div>
                            </>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}
